<template>
	<view class="content">
		<view class="bigbox">
			<view class="titlebox">
				<text>{{wenjuanshow.name}}</text>
			</view>
			<view class="titleboxone">
				<text>{{wenjuanshow.description}}</text>
			</view>
		</view>
		 <form @submit="formSubmit">
		<view style="margin-top: 60upx;box-sizing: border-box;" v-for="(item,index) in wenjuanlist" :key="index">
			<!-- 多选 -->
			<checkbox-group v-if="item.option_type=='1'" :name='item.id'>
				<label style="font-size: 28upx;display: flex;flex-direction: column;">
					<label
						style="height: 80rpx; background-color: #f4f4f4;line-height: 80rpx;padding: 0 20rpx;">{{index+1}}.{{item.title}}<text
							class="xiaotitle">多选</text></label>
					<label style="display: flex;flex-direction: column;padding: 0 20rpx;">
						<checkbox v-for="(i,index) in item.oplist" :key="index" :value="i.id"
							style="height: 60rpx; background-color: #FFf;line-height: 60rpx;"><text>{{i.content}}</text>
						</checkbox>
					</label>
				</label>
			</checkbox-group>
			<!-- 单选 -->
			<radio-group v-if="item.option_type=='0'" :name='item.id'>
				<label style="font-size: 28upx;display: flex;flex-direction: column;">
					<label
						style="height: 80rpx; background-color: #f4f4f4;line-height: 80rpx;padding: 0 20rpx;padding: 0 20rpx;">{{index+1}}.{{item.title}}<text
							class="xiaotitle">单选</text></label>
					<label style="display: flex;flex-direction: column;padding: 0 20rpx;">
						<radio v-for="(i,index) in item.oplist" :key="index" :value="i.id"
							style="height: 60rpx; background-color: #FFf;line-height: 60rpx;">{{i.content}}</radio>
					</label>
				</label>
			</radio-group>
			<view class="wenbenyu" v-if="item.option_type=='3'" style="box-sizing: border;padding: 0 20rpx;">
				<view class="titlewenbenyu" style="height: 80rpx; background-color: #fff;line-height: 80rpx;">
					<text>{{index+1}}.{{item.title}}</text>
				</view>
				<textarea maxlength="140" :name='item.id' class="wenziy" v-model="content" placeholder-style="color:#ccc"
					placeholder="请输入内容"
					style="width: 100%;background-color: #efefef;height: 300rpx;border-radius: 10rpx;box-sizing: border-box;" />
			</view>
		</view>

		<view class="bottombtn">

			<!-- <view class="centerbtn" @tap="wenjuanqutijiao">
				<!-- <text>提交</text> -->
				
			<!-- </view> -->
			<button class="centerbtn" type="default" formType="submit">提交</button>
		</view>
		</form>


	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},

		data() {
			return {
				wenjuanshow: {},
				wenjuanlist: [],
				id:0,
				class_id:0,
				company_id:0

			}
		},
		methods: {
			change(e, res) {
				console.log(e)
				console.log(res);
			},
			wenjuanxiangqing() {
				this.$store
					.dispatch('wenjuanxiangqing', {
						openid: this.userInfo.openid,
						token: this.userInfo.token,
						ids: this.id,
						class_id:this.class_id,
						index:uni.getStorageSync("def"),
						company_id:this.company_id
					})
					.then(res => {
						console.log(res)
						this.wenjuanshow = res.data.data.info
						this.wenjuanlist = res.data.data.list
					});
			},			
			  formSubmit(e){				 
			        var questlist = e.detail.value;
					console.log(questlist)
																	
			        for (var index in questlist) {
			            if (questlist[index] == "") {
			                wx.showModal({
			                    title: '警告',
			                    content: '请填写完整',
			                    success: function (res) {
			
			                    }
			                })
			                return false;
			            } else{
							
						}
			        }
					this.$store
						.dispatch('wenjuanqutijiao', {
							openid: this.userInfo.openid,
							token: this.userInfo.token,
							ser_id: this.wenjuanshow.id,
							quest:questlist,
							class_id:this.class_id,
							company_id:this.company_id
							
					
						})
						.then(res => {											
							if(res.data.code==1){
								uni.showToast({
									title: '提交成功',
									icon: "none"
								})
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})								
								}, 800)
							}
							
						});																								
			    },
			

		},
		onLoad(data) {
			this.id = data.id
			this.class_id = data.class_id
			this.company_id = data.company_id
			
		},
		onShow() {
			if (!this.isLogin) {
				if (uni.getStorageSync("token")) { //判断是否有token，然后调用自动登录的接口
					this.$store
						.dispatch('loginByWexin')
						.then(res => {
							this.code = res
							this.$store
								.dispatch('apiUserAutoLogin', {
									token: uni.getStorageSync("token")
								})
								.then(res => {
									this.wenjuanxiangqing()
								});
						});
				} else { //没有token，去登录页面点击登录				
					uni.navigateTo({
						url: '../login/login'
					})
				}
		
			} else {
				this.wenjuanxiangqing()
			}
		}
	}
</script>

<style lang="less">
	.content {
		width: 100%;

		box-sizing: border-box;

		.bigbox {
			padding: 0 20rpx;
			margin-top: 20rpx;

			.titlebox {
				text-align: center;
				font-size: 35rpx;

			}

			.titleboxone {
				font-size: 28rpx;
				color: #999999;

			}
		}
		.xiaotitle{
			background-color: #0a98f7;
			font-size: 24rpx;
			line-height: 80rpx;
			height: 80rpx;
			margin-left: 10rpx;
			color: #fff;			
			border-radius: 15rpx;
			padding: 0 15rpx;
			
		}

		.bottombtn {
			position: fixed;
			bottom: 35rpx;
			left: 0;
			width: 100%;
			height: 120rpx;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;

			.centerbtn {
				width: 100%;
				height: 100%;
				background-image: linear-gradient(to right, #0a98f7, #23c3f3);
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 34rpx;
			}

		}
	}
</style>
